<style lang="scss" scoped>
    .mshop-address-edit {
        padding-top: 46px;

        .save {
            width: 90%;
            text-align: center;;
            display: block;
            font-size: 18px;
            background-color: #f44336;
            color: white;
            padding: .4em .4em;
            border-radius: .2em;
            margin: 5em auto;

            &:active {
                background-color: #e91e63;
            }
        }

    }
</style>

<template>
    <div class="mshop-address-edit">
        <group>
            <x-input
                :value.sync="address.name"
                placeholder="收货联系人"
                required
                type="text" ></x-input>

            <x-input
                :value.sync="address.phone"
                placeholder="手机号码"
                type="number"
                keyboard
                is-type="china-mobile"
                type="text" ></x-input>

            <x-input
                :value.sync="address.zip"
                placeholder="邮政编码"
                type="number"
                keyboard
                is-type="china-mobile"
                type="text" ></x-input>
        </group>


        <group>
            <address
                title="选择地址"
                :value.sync="address.address"
                :list="addressData"></address>

            <x-textarea
                :max="200"
                :value.sync="address.street"
                placeholder="请输入详细地址"
                show-counter
                required ></x-textarea>

        </group>

        <span class="save" @click.prevent="do_save">保存</span>
        <toast :show.sync="show_toast" type="text">{{{ toast_error }}}</toast>
    </div>
</template>

<script>
    import XInput from 'vux-components/x-input'
    import Group from 'vux-components/group'
    import Address from 'vux-components/address'
    import XTextarea from 'vux-components/x-textarea'
    import Toast from 'vux-components/toast'
    import AddressChinaData from './list.json'

    import addressService from 'services/address'


    window.data = AddressChinaData

    export default {
        data () { return {
            address: {
                name: '',
                phone: '',
                zip: '',
                address: [],
                street: '',
            },
            address_id: false,
            addressData: AddressChinaData,
            show_toast: false,
            toast_error: '123',
        }},
        components: {
            XInput,
            Group,
            Address,
            XTextarea,
            Toast
        },
        route: {
            data: ({to}) => {
                if (to.query.id) {
                    return addressService
                        .fetchOne(to.query.id)
                        .then(({data}) => ({ address: data, address_id: to.query.id}))
                } else {
                    return {
                        address: {},
                        address_id: false,
                    }
                }
            }
        },
        methods: {
            do_save () {
                let error = '';

                if (!this.address.name) error += '<p>未填写姓名</p>'
                if (!this.address.phone) error += '<p>未填写手机</p>'
                if (this.address.address.length === 0) error += '<p>未选择地址</p>'
                if (!this.address.street) error += '<p>未填写详细地址</p>'

                if (error) {
                    this.show_toast = true;
                    this.toast_error = error;
                } else {
                    addressService.save(this.address_id, this.address).then(() => {
                        this.$route.router.go(window.history.back());
                    });
                }
            }
        }
    }

</script>
